<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mpeg/audio</title>
<style>
body {
    background-color: #6E655A;
}
audio {
    display: block;
    padding: .5em 0;
}
.radio_list{
        width: 200px;
}
.radio_list li{
        cursor: pointer;
        margin-bottom: .2em;
        padding: .1em;
}
.radio_list li:hover {
        background-color:yellow;
}
</style>
</head>
<body>
<h1>Hello</h1>

<audio id="player" src="" controls="controls" preload="none">
Your browser does not support the audio element.
</audio>

<script>
//a1=document.getElementById("a1");
//a1.volume=0.5;
</script> 

<span id="radio-name"></span>
<span id="radio-link"></span>
<div class="radio_list">
<ul>
<li onclick="playStream('http://rtspoversea.dbc.hk/dbc2',this)">DBC 2</li>
<li onclick="playStream('http://rtspoversea.dbc.hk/dbc1',this)">DBC 1</li>
<li onclick="playStream('http://213.229.118.8:8000/Channel1-64MP3',this)">D100 1</li>
<li onclick="playStream('http://213.229.118.8:8000/Channel3-64MP3',this)">D100 3</li>
<li onclick="playStream('http://213.229.118.8:8000/Channel4-64MP3',this)">D100 4</li>
<li onclick="playStream('http://ctt.tttv.tv:8000/hifi',this)">广东 hifi</li>
<li onclick="playStream('http://ctt.tttv.tv:8000/fm914',this)">广东 fm914</li>
<li onclick="playStream('http://ctt.tttv.tv:8000/fm993',this)">广东 fm993</li>
<li onclick="playStream('http://ctt.tttv.tv:8000/fm1052',this)">广东 fm1052</li>
<li onclick="playStream('http://stream-dc1.radioparadise.com/mp3-32',this)">radioparadise</li>
<li onclick="playStream('http://stric6.streamakaci.com/kernews.mp3',this)">knews</li>
<li onclick="playStream('http://stream.radioreklama.bg:80/nrj_low.ogg',this)">nrj</li>
</ul>
</div>

<script type="text/javascript">

function playStream(url, el) {

        var player = document.getElementById('player');
        var name = document.getElementById('radio-name');
        name.innerHTML = el.innerHTML;
        
        (player.paused == true) ? toggle(0, url) : toggle(0, url);

}

function toggle(state, url) {

        var player = document.getElementById('player');
        var link = document.getElementById('radio-link');
        var src = url; //"http://192.81.248.91:8159/;";

        switch(state) {
                case 0:
                        player.src = src;
                        player.load();
                        player.play();
                        link.innerHTML = 'Play';
                        player_state = 1;
                        break;
                case 1:
                        player.pause();
                        player.currentTime = 0;
                        player.src = '';
                        link.innerHTML = 'Pause';
                        player_state = 0;
                        break;
        }
}
</script>
</body>
</html>